<template>
  <view class="sortComBox">
    <view class="title"> {{ props.title }} </view>

    <view class="rule">
      <view
        v-for="(item, index) in ruleList"
        :ket="index"
        :class="{ item: true, itemChoose: chooseIndex === index }"
        @click="choose(index, item.rule)"
        >{{ item.msg }}</view
      >
    </view>
  </view>
</template>

<!-- 排序组件 -->
<script lang="ts" setup>
import type { DynamicSortRule } from "@/config/data/data"
import {
  ref,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onActivated,
  onDeactivated,
  onBeforeUnmount,
  type PropType,
} from 'vue'

// 自定义事件
const emit = defineEmits(['rule'])

//接受父组件参数
const props = defineProps({
  title:{
    type:String
  },
  ruleList: {
    type: Array as PropType<DynamicSortRule[]>,
  },
} as const)

//当前选中下标
const chooseIndex = ref<number>(0)

//当前选中事件
const choose = (index: number, message: string) => {
  chooseIndex.value = index
  emit('rule', message)
}

// 组件周期函数--监听组件挂载完毕
onMounted(() => {})
// 组件周期函数--监听组件数据更新之前
onBeforeUpdate(() => {})
// 组件周期函数--监听组件数据更新之后
onUpdated(() => {})
// 组件周期函数--监听组件激活(显示)
onActivated(() => {})
// 组件周期函数--监听组件停用(隐藏)
onDeactivated(() => {})
// 组件周期函数--监听组件销毁之前
onBeforeUnmount(() => {})
</script>

<style scoped lang="scss">
.sortComBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28rpx;
  color: rgb(102, 101, 101);
  padding: 15rpx;
  .title {
    font-size: 30rpx;
  }

  .rule {
    display: flex;
    justify-content: space-between;
    height: 50rpx;
    padding: 5rpx;
    border-radius: 22rpx;
    background-color: rgba(215, 213, 213, 0.362);

    .item {
      min-width: 70rpx;
      height: 50rpx;
      display: flex;
      font-size: 28rpx;
      padding: 0 10rpx;
      justify-content: center;
      align-items: center;
      border-radius: 22rpx;
    }

    .itemChoose {
      background-color: rgb(255, 255, 255);
      color: rgb(30, 30, 30) !important;
    }
  }
}
</style>
